<template>
	<view class="page">
		<view class="nav_barH"></view>
		<!-- 头部 -->
			<view class="padding-lr flex justify-between align-center" style="height: 188rpx;">

		</view>

		<view class="bg">
			<view class="logo-contnt">
				<view class="logo">
					<image src="../../../../static/logo.png" mode="aspectFit" class="image"></image>
				</view>
			</view>
		</view>
		<!-- 输入手机号 -->
		<view style="width: 85%; margin: 0 auto; margin-top: 1rpx;background-color: #FFFFFF;border-radius:10rpx ;">
			<view class="flex align-center solid-bottom" style="width: 100%;height: 90rpx;padding: 0 35rpx;">
				<view class="text-xxl text-999">
					<view class="title">
						<image class="image" :src="image1" mode="widthFix"></image>
					</view>
				</view>
				<input class="flex-sub margin-lr text-xxl text-333" :focus="true" type="number" v-model="mobile"
					maxlength="11" style="font-size: 30rpx;" placeholder="请输入手机号码" />
				<view>
					<uni-icons v-if="mobile" type="closeempty" size="24" color="#999999" @click="refresh"></uni-icons>
				</view>
			</view>
		</view>
		<!-- 获取验证码 -->
		<view style="margin-top: 151rpx;">
			<button class="cu-btn round action-btn" :loading="loading" @click="getCode">获取验证码</button>
			<button class="cu-btn round action-btn2"  @click="handleJump" data-type="REDIRECT" :data-url="PAGE_BASE_URL + 'login-password/index?phone='+mobile">使用账号登录</button>
		</view>



		<view class="box-bottom">
			<view class="agreement">
				<image class="image" @click="handle_select" v-if="is_select_agree" :src="image5">
				</image>
				<image class="image" @click="handle_select" v-else :src="image6"></image>
				<view> 点击登录即默认同意 <text @tap="handleJump" data-url="/pages/user/login/user-agreement/index?id=43"
						>《用户协议》</text>与<text @tap="handleJump"
						data-url="/pages/user/login/user-agreement/index?id=22" >《隐私政策》</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				mobile: '',
				loading: false,
				PAGE_BASE_URL: '/pages/user/login/', // 页面基础路径
				is_select_agree:false,
				image1:require('../../static/phone.png'),
				image2:require('../../static/pwd.png'),
				image3:require('../../static/open.png'),
				image4:require('../../static/close.png'),
				image5:require('../../../user/static/checked.png'),
				image6:require('../../static/unchecked.png'),
			};
		},
		methods: {
			gopassword(){
				uni.navigateTo({
					url: '/pages/user/login/login-password/index?phone='+ this.mobile
				})
			},
			// 获取验证码
			getCode() {
				if (this.loading) return;
				if (!this.mobile) {
				  this.$message.info("请输入手机号");
				  return false;
				}
				if (this.mobile.length != 11) return this.$message.info('手机号格式不正确');
					if (!this.is_select_agree) return this.$message.info('请勾选协议');
				this.loading = true;
				let _mobile = this.mobile;
				
				
				this.$api.post(global.apiUrls.GetVerifyCode, {
					mobile: _mobile,
					type: 3,
					is_test: 1,
				}).then(res => {
					console.log('验证码', res);
					res = res.data
					
					if (res.code == 1) {
						
						uni.navigateTo({
							url: '/pages/user/login/login-code/loginCode?mobile=' + _mobile + '&code=' + res
								.data.code
						})
					} else {
						this.loading = false;
						this.$message.info(res.msg);
					}
				}).catch(err => {
					console.log(err)
					this.loading = false;
				})
			},
			// 平台协议
			look() {
				uni.navigateTo({
					url: '/pages/center/message/article/articleDetails?id=1'
				})
			},
			// 退出页面
			navback() {
				uni.navigateBack();
			},
			// 清除
			refresh() {
				this.mobile = '';
			},
			/**
			 * @param 是否选择同意协议
			 */
			handle_select() {
			  this.is_select_agree = !this.is_select_agree
			},
			// 微信登录
			loginByWx() {
				uni.login({
					provider: 'weixin',
					success: (loginRes) => {
						console.log('uni.login返回', loginRes);
						uni.getUserInfo({
							provider: 'weixin',
							success: (infoRes) => {
								console.log('uni.getUserInfo返回', infoRes);
								let userInfo = infoRes.userInfo;
								this.$Request.post(this.$api.user.user_wechat_login, {
									type: 1,
									wx_unionid: loginRes.authResult.unionId,
								}).then(res => {
									console.log('三方登录返回', res)
									if (res.code == 1) {
										this.$Common.toast(res.msg);
										// uni.setStorageSync('USERINFO', res.data.userinfo);
										// // #ifdef APP-PLUS
										// var client_id = '';
										// client_id = plus.push.getClientInfo().clientid;
										// var user = res.data.userinfo;
										// if(client_id != user.client_id){
										// 	this.$Request.post(this.$api.common.set_client_id,{
										// 		client_id: client_id,
										// 	}).then(result => {
										// 		console.log(result);
										// 		if (result.code == 1) {
										// 			//更新为新的client_id
										// 			user.client_id = client_id;
										// 			this.$store.commit('updateUserInfo',user);
										// 		}
										// 	});
										// }
										// // #endif
										// this.navigateBack({delta: 1});
									} else if (res.code == '-999') {
										uni.setStorageSync('weChatInfo', userInfo);
										uni.navigateTo({
											url: '/pages/login/bind_account'
										})
									}
								}).catch(err => {
									console.error('第三方登录接口报错 =>', err);
								})
							}
						})
					}
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	.page {
		// height: 100%;
		// min-height: 100%;
		// background-color: #FFFFFF;
		// background: linear-gradient( 180deg, #E6F0FF 0%, #FFFFFF 100%);
		// background-image: url(../../static/images/login_002.png),url(../../static/images/login_001.png);
		// background-position: 0 84rpx, 295rpx 650rpx;
		// background-size: 455rpx 363rpx, 455rpx 480rpx;
		// background-repeat: no-repeat, no-repeat;
		// background: linear-gradient(180deg, #E6F0FF 0%, #FFFFFF 100%);
		// background: linear-gradient( 180deg, #AAC0B5 0%, #FFFFFF 100%);
		width: 100%;
		background: url('https://localelife.chunchuangkeji.cn/static/home_bg.jpg') no-repeat;
		background-size:100% 100%;
		min-height: 100vh;
		overflow: hidden;
	}

	.action-btn {
		width: 85%;
		height: 90rpx;
		// background: linear-gradient(270deg, rgba(240, 34, 36, 1) 0%, rgba(251, 71, 71, 1) 100%);
		// box-shadow: 0px 16px 32px rgba(243, 45, 72, 0.24);
		// background: linear-gradient(180deg, #6A8D6C 0%, #6A8D6C 100%);
		background-color: #FC6296;
		border-radius: 14rpx;
		color: #ffffff;
		font-size: 32rpx;
		display: block;
		margin: 0 auto;
		line-height: 90rpx;
	}

	.action-btn2 {
		width: 85%;
		height: 90rpx;
		background: #FFFFFF;
		border-radius: 14rpx;
		border: 1px solid #FC6296;
		font-size: 32rpx;
		color: #FC6296;
		display: block;
		margin: 15rpx auto;
		line-height: 90rpx;
	}

	.block-64 {
		width: 64rpx;
		min-width: 64rpx;
		height: 64rpx;
		min-height: 64rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.block-64+.block-64 {
		margin-left: 20rpx;
	}




	// background pic start
	.bg {
		height: 450rpx;
		width: 100%;

		.bg_img {
			height: 480rpx;
			width: 100%;
			position: absolute;
			left: 0;
			top: 0;
			z-index: 2;
		}
	}

	.logo-contnt {
		width: 100%;
		overflow: hidden;

		.logo {
			margin-top: 80rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			.image {
				width: 180rpx;
				height: 180rpx;
				border-radius: 16rpx;
			}
		}

		.desc {
			width: 100%;
			height: 100rpx;
			text-align: center;
			line-height: 100rpx;
			margin-top: 32rpx;
			font-size: 36rpx;
			font-family: PingFang SC;
			color: #333333;
		}

	}

	.title {
		margin: 0 28rpx 0 0rpx;
		width: 34rpx;
		height: 100%;
		position: relative;
		flex-shrink: 0;

		.image {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
		}
	}

	.box-bottom {
		position: absolute;
		bottom: 60rpx;
		width: 100%;

		.agreement {
			display: flex;
			width: 100%;
			font-family: PingFangSC-Regular;
			font-size: 22rpx;
			color: #999999;
			align-items: center;
			justify-content: center;

			.image {
				height: 24rpx;
				width: 24rpx;
				margin-right: 12rpx;
			}
			text {
				color: #FC6296;
			}
		}

	}
</style>